<template>
    <div>
        <h1>Count组件</h1>
        <h4>当前计算值:{{ sum }}</h4>
        <h4>放大10背后的值:{{ bigSum }}</h4>
        <h4>学校名称:{{ school }}</h4>
        <h4>学科名称：{{ subject }}</h4>
        <h4 style="color: red;">Person组件数量：{{ personList.length }}</h4>
        <div class="container">
            <select v-model.number="num">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="5">5</option>
            </select>
            <button @click="JIA(num)"> + </button>
            <button @click="JIAN(num)"> - </button>
            <button @click="jiaOdd(num)">奇数才加</button>
            <button @click="jiaWait(num)">等一会加</button>
        </div>
    </div>

</template>

<script>

import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';

export default {
    name: 'Count',
    data() {
        return {
            num: 1
        }
    },
    computed:{

        //标准写法
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),

        //数组写法
        ...mapState('countAbout',['sum','school','subject']),
        ...mapState('personAbout',['personList']),


        ...mapGetters('countAbout',['bigSum'])
        // bigSum(){
        //     return this.$store.getters.bigSum
        // }
    },
    methods: {


        // increment() {
        //     this.$store.commit('JIA', this.num)
        // },
        // decrement() {
        //     this.$store.commit('JIAN', this.num)
        // },

        ...mapMutations('countAbout',['JIA','JIAN']),


        // incrementOdd() {
        //     this.$store.dispatch('jiaOdd', this.num)
        // },
        // incrementWait() {
        //     this.$store.dispatch('jiaWait', this.num)
        // },

        ...mapActions('countAbout',['jiaOdd','jiaWait']),

    }
}
</script>

<style scoped>
.container {
    width: 300px;
    display: flex;
    justify-content: space-around;
}
</style>